uniApp使用高德地图api

2023-11-19 11:02| 来源: 网络整理| 查看: 265

uniApp使用高德地图api

1，在自己项目中的/src/common/js中的weixin.js写入，没有就新建文件，（具体目录因自己项目而议）

export const weixin = { /* 获取地理位置接口 */ getLocation: function (callback) { let option = { type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90 // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 // var speed = res.speed; // 速度，以米/每秒计 // var accuracy = res.accuracy; // 位置精度 if (callback && callback instanceof Function) { callback(res); } } } wx.getLocation(option); }, /* 调起地图 */ openLocation: function(data){ wx.openLocation({ longitude: Number(data.longitude), latitude: Number(data.latitude), name: data.name, address: data.address }) }, }

2，在自己项目中的/src/common/js中的新建aMap.js文件，（具体目录因自己项目而议）

// if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = 'http://webapi.amap.com/maps?v=1.4.8&callback=initAMap&key=你的key值' //key值要去高德api官网申请 script.onerror = reject document.head.appendChild(script) } window.initAMap = () => { resolve(window.AMap) } }) } /** * 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息 * 对应为 AMap.Geocoder 的 getAddress 方法 * @param {Number} longitude 经度 * @param {Number} latitude 纬度 */ export const getAddress = function (longitude, latitude) { // if (arguments[0] == null || arguments[1] == null) { // longitude = 113.4129 // latitude = 23.172686 // } MapLoader().then(AMap => { AMap.plugin('AMap.Geocoder', function () { var geocoder = new AMap.Geocoder() var lnglat = [longitude, latitude] geocoder.getAddress(lnglat, function (status, result) { if (status === 'complete' && result.info === 'OK') { // console.log(result) return result // result为对应的地理位置详细信息 } }) }) }, e => { console.log('地图加载失败', e) } ) } /** * 正向地理编码：将地址描述信息转换成地理坐标（经纬度）， * 对应为 AMap.Geocoder 的 getLocation 方法 * @param {String} site 详细地址 */ export const getLocation = function (site) { return new Promise((resolve)=>{ MapLoader().then(AMap => { AMap.plugin('AMap.Geocoder', function () { var geocoder = new AMap.Geocoder() geocoder.getLocation(site, function (status, result) { if (status === 'complete' && result.info === 'OK') { // console.log(result,'result') resolve(result) // return result // result中对应详细地理坐标信息 } }) }) }, e => { console.log('地图加载失败', e); resolve(false) } ) }) } /** * 获取地图周边 */ export const getCircum = function (newLng,newLat) { return new Promise((resolve)=>{ MapLoader().then(AMap => { AMap.plugin('AMap.Geocoder', function () { var map = new AMap.Map("container", { resizeEnable: true }); AMap.service(["AMap.PlaceSearch"], function() { //构造地点查询类 var placeSearch = new AMap.PlaceSearch({ type: '', // 兴趣点类别 pageSize: 6, // 单页显示结果条数 pageIndex: 1, // 页码 city: "", // 兴趣点城市 citylimit: false, //是否强制限制在设置的城市内搜索 map: map, // 展现结果的地图实例 panel: "panel", // 结果列表将在此容器中进行展示。 autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 }); var cpoint = [newLng, newLat]; //中心点坐标 // var cpoint = [113.342309, 23.170892]; //中心点坐标 placeSearch.searchNearBy('', cpoint, 200); AMap.event.addListener(placeSearch, 'complete', onComplete) function onComplete (data) { console.log('定位成功信息') } }); }) }, e => { console.log('地图加载失败', e); resolve(false) } ) }) }

3，在要使用到高德的api文件中使用：

//引用 import { getWxOpenId, weixin } from '@/common/js/weixin.js' import { getLocation } from '@/common/js/AMap.js'; methods: { //导航 openLocation(item, index){ // console.log(9999, item); let that = this; getLocation(item).then(res=>{ // console.log(res); if(res && res.geocodes.length >0){ let lng = res.geocodes[0].location.lng; let lat = res.geocodes[0].location.lat; if(index == 0) { weixin.openLocation({ longitude: lng, latitude: lat, name: res.geocodes[0].formattedAddress, address: res.geocodes[0].formattedAddress }) }else{ //navigateTo是封装的跳转方法，这里是跳转自己写的地图周边 that.navigateTo('./entrepotAmap?lng=' + lng + '&lat=' + lat); } } }); }, }

4，新建放地图周边的vue文件entrepotAmap.vue：（这一步看自己项目需求写，没有可以不管） html：

js：

import { getCircum } from '@/common/js/AMap.js'; export default { data() { return { aMapLng: '', aMapLat: '', } }, mounted() { //使用了高德地图api的方法要使用mounted生命周期，使用created页面会显示空白 this.aMapLng = this.$route.query.lng; this.aMapLat = this.$route.query.lat; this.getLocation(); }, methods: { // 获取经纬度信息 getLocation () { // 搜索周边 getCircum(this.aMapLng,this.aMapLat).then(res=>{ console.log(''); }); }, // 返回上一页 backPage() { uni.navigateBack({}); }, } }

css：

#entrepotAmap{ width: 750upx; box-sizing: border-box; background: #fff; height: 100vh; overflow: hidden; .back { position: absolute; top: 26upx; left: 16upx; width: 24upx; height: 32upx; background: url('../../static/images/home/2.png') no-repeat center / 100%; transform: rotate(180deg); z-index: 999; } #container{ width: 100%; height: 100vh; } #panel { position: absolute; background-color: white; max-height: 35%; overflow-y: auto; top: 10upx; right: 10upx; width: 560upx; font-size: 24upx; } }

【本文地址】

公司简介

联系我们